/*
 * @Description:
 * @Author: 胡涛
 * @Date: 2024-07-29 22:20:01
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-07-29 23:56:54
 */

import { ZRColor } from "echarts/types/dist/shared";
import { LinearDirection, ECOption } from "./types";
import * as echarts from "echarts/core";

/**
 * 初始化地图
 * @param el
 * @param theme
 * @param options
 * @returns
 */
export const initCharts = (
  el: HTMLElement,
  theme?: string,
  options?: ECOption
) => {
  return echarts.init(el, theme, options as any);
};

/**
 * 创建渐变颜色
 * @param color1
 * @param color2
 * @param direction
 * @returns
 */
export const createLinearColor = (
  color1: string,
  color2: string,
  direction?: LinearDirection
): ZRColor => {
  return {
    type: "linear",
    x: 0,
    y: 0,
    x2: direction === "horizontal" ? 1 : 0,
    y2: direction === "horizontal" ? 0 : 1,
    colorStops: [
      {
        offset: 0,
        color: color1,
      },
      {
        offset: 1,
        color: color2,
      },
    ],
  };
};

/**
 * 创建图表默认参数
 * @param showLegend
 * @returns
 */
export const createDefaultOptions = (showLegend?: boolean): ECOption => {
  let opts: ECOption = {
    color: ["#0081cc", "#ff9966", "#00ff77"],
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.5)",
      textStyle: { color: "#fff" },
    },
    xAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          opacity: 0.3,
          color: "#0081cc",
        },
      },
      nameTextStyle: {
        color: "#66ccff",
        fontSize: 12,
      },
      axisLabel: {
        interval: 0,
      },
      splitLine: {
        lineStyle: {
          color: "#0081cc",
          opacity: 0.3,
        },
      },
    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: "#0081cc",
          opacity: 0.3,
        },
      },
      nameTextStyle: {
        color: "#66ccff",
        fontSize: 12,
      },
      splitLine: {
        lineStyle: {
          color: "#0081cc",
          opacity: 0.3,
        },
      },
    },
    grid: {
      left: 40,
      top: 40,
      right: 20,
      bottom: 40,
    },
  };
  if (showLegend) {
    opts.legend = {
      show: true,
      textStyle: { color: "#66ccff" },
      top: 10,
    };
  }
  return opts;
};

export const createPieOptions = (
  options: ECOption,
  showLegend?: boolean
): ECOption => {
  let opts: ECOption = {
    color: ["#0081cc", "#ff9966", "#00ff77"],
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.5)",
      textStyle: { color: "#fff" },
    },
  };
  if (showLegend) {
    opts.legend = {
      show: true,
      textStyle: { color: "#66ccff" },
      top: 10,
    };
  }
  return mergeOption(opts, options);
};

/**
 *
 * @param options
 * @param showLegend
 * @returns
 */
export const createEChartOptions = (
  options: ECOption,
  showLegend?: boolean
): ECOption => {
  let opts: any = createDefaultOptions(showLegend);
  return mergeOption(opts, options);
};

/**
 * 合并参数
 * @param opts
 * @param newOpts
 * @returns
 */
const mergeOption = (opts: any, newOpts: any) => {
  let keys = Object.keys(newOpts);
  let res: any = { ...opts };
  keys.map((x) => {
    if (newOpts[x]) {
      if (Array.isArray(newOpts[x])) {
        res[x] = [...newOpts[x]];
      } else if (opts[x]) {
        res[x] = Object.assign({}, opts[x], newOpts[x]);
      } else {
        res[x] = Object.assign({}, newOpts[x]);
      }
    }
  });
  console.log("res", res);
  return res;
};
